<template>
   <div class="capacityBox">
        <div class="top green">
            JR能力
        </div>
        <div class="score">
            <div class="capacity"  :class="item.style" :title="item.name" v-for="(item ,i) in capacity" :key="i" @click="blockClick(item.score)">
                {{ item.name }}
            </div>
        </div>
        <div class="bottom blue">
            吞吐量保障能力
        </div>
    </div>
</template>
<script>

export default {
    name: "capacityBox",
    props: {
        
    },
    data() {
        return {
            capacity:[
                { name: '绝对重要/有优势', style: 'green', score: '9'},
                { name: '十分重要/有优势', style: 'green', score: '7'},
                { name: '重要/有优势', style: 'green', score: '5'},
                { name: '稍微重要/有优势', style: 'green', score: '3'},
                { name: '相同重要', style: 'middle', score: '1'},
                { name: '稍微重要/有优势', style: 'blue', score: '1/3'},
                { name: '重要/有优势', style: 'blue', score: '1/5'},
                { name: '十分重要/有优势', style: 'blue', score: '1/7'},
                { name: '绝对重要/有优势', style: 'blue', score: '1/9'},
            ]
        };
    },
    methods:{
        blockClick(val){
            this.$emit('handleScore', val)
        }
    },
    mounted() {},
};
</script>
<style lang="scss">
.capacityBox{
    width: 100%;
    height: 100%;
    font-family: Alibaba PuHuiTi;
    font-size: 12px;
    font-weight: 400;
    .top{
        background-color: rgba(89,137,149,0.1);
    }
    .bottom{
        background: rgba(101,118,157,0.1)
    }
    .top,.bottom{
        font-size: 14px;
        font-weight: 500;
        height: 20px;
        line-height: 20px;
        padding-left: 10px;
        white-space: nowrap; /* 防止换行 */
        overflow: hidden; /* 控制元素溢出部分不显示 */
        text-overflow: ellipsis; /* 使用省略号表示被裁切的文本 */
    }
    .score{
        height: calc(100% - 40px);
        overflow-y: scroll;
    }
    .capacity{
        min-height: 20px;
        height: calc(100% / 9);
        padding-left: 15px;
        cursor: pointer;
        white-space: nowrap; /* 防止换行 */
        overflow: hidden; /* 控制元素溢出部分不显示 */
        text-overflow: ellipsis; /* 使用省略号表示被裁切的文本 */
    }
    .green{
        color: #598995;
    }
    .blue{
        color:#65769D;
    }
    .middle{
        color: #5D8BF3;
    }
}
</style>